<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="postForm"
      label-position="right"
      label-width="100px"
      style="width: 400px; margin-left:50px;"
    >
      <el-form-item label="接口名称" prop="name">
        <el-input v-model="postForm.name" clearable placeholder="接口名称" maxlength="20" />
      </el-form-item>
      <el-form-item label="接口类型" prop="typeId" @change="selectChange()">
        <el-select
          v-model="postForm.typeId"
          placeholder="请选择接口类型"
          clearable
        >
          <el-option
            v-for="item in listApitypeCombo"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="url" prop="url">
        <el-input v-model="postForm.url" placeholder="url" maxlength="100" />
      </el-form-item>
      <el-form-item label="接口描述" prop="remarks">
        <el-input v-model="postForm.remarks" placeholder="接口描述" maxlength="200" />
      </el-form-item>
      <el-form-item label="排序" prop="displayOrder">
        <el-input v-model.number="postForm.displayOrder" placeholder="排序" maxlength="6" />
      </el-form-item>
      <el-form-item label="请求类型" prop="requestType" :disabled="false">
        <el-select
          v-model="postForm.requestType"
          filterable
          placeholder="请选择"
          style="width: 100%;"
          @change="selectChange"
        >
          <el-option
            v-for="item in requestTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="back()">返回</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addSysApi, updateSysApi, getSysApi } from '@/api/sys/api'
import msgUtil from '@/utils/msgUtil'
import routerUtil from '@/utils/routerUtil'
import { listApitypeCombo } from '@/api/common/common'
import ComboConst from '@/utils/ComboConst'

const defaultForm = {
  id: null,
  name: null,
  url: null,
  remarks: null,
  displayOrder: null,
  requestType: 1
}
export default {
  name: 'SysApiDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listApitypeCombo: null, // 下拉框
      postForm: Object.assign({}, defaultForm),
      requestTypeOptions: ComboConst.requestTypeOptions,
      rules: {
        name: [
          { required: true, trigger: 'blur', message: '接口名称不能为空' },
          { min: 1, max: 20, trigger: 'change' }
        ], typeId: [
          { required: true, trigger: 'blur', message: '接口类型不能为空' }
        ],
        url: [
          { required: true, trigger: 'blur', message: 'url不能为空' }
        ],
        displayOrder: [{ required: true, trigger: 'blur', message: '排序不能为空' },
          { type: 'number', trigger: 'blue' }
        ]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.listSysApitype()
    if (this.isEdit) {
      this.getSysApi(this.$route.query.id)
    } else {
      this.loading = false
    }
  },
  methods: {
    listSysApitype() {
      listApitypeCombo({}).then(response => {
        this.listApitypeCombo = response.data
      })
    },
    // 修改接口
    updateSysApi() {
      updateSysApi(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/sys/api/index')
      })
    },
    // 新增用户
    addSysApi() {
      addSysApi(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/sys/api/index')
      })
    },
    // 返回
    back() {
      routerUtil.backPath(this, '/sys/api/index')
    },
    // 提交form
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.updateSysApi()
          } else {
            this.addSysApi()
          }
        }
      })
    },
    // 获取角色信息并赋值给当前页面
    async getSysApi(id) {
      var json = { 'id': id }
      await getSysApi(json).then(response => {
        this.postForm = response.data
      })
    },
    selectChange() {
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped>

</style>
